<template>
	<div style="margin-top: 50px">
		<el-form :model="role" ref="roleFrom" label-width="120px" style="width: 680px" size="small">
			<el-form-item label="更新类型：">
				<template>
					<el-select v-model="role.status" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</template>
			</el-form-item>


			<el-form-item label="版本号：">
				<el-input v-model="role.version"></el-input>
			</el-form-item>

			<el-form-item label="安装包地址：" v-if="role.status == 0">
				<el-input v-model="role.wgetUrl"></el-input>
			</el-form-item>
			
			<el-form-item label="安装包地址：" v-if="role.status == 1">
				<el-input v-model="role.appUrl"></el-input>
			</el-form-item>
			
			<el-form-item label="更新说明：">
				<el-input v-model="role.name"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit('roleFrom')">提交</el-button>
				<el-button  @click="resetForm('roleFrom')">重置</el-button>
			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	  import {creatVersion} from '@/api/role'
	const defaultRole = {
		version: '',
		name: '',
		url: '',
		status: 0,
		wgetUrl:'',
		appUrl:''
	};
	export default {
		data() {
			return {
				role: Object.assign({}, defaultRole),
				options: [{
					value: 0,
					label: '热更新'
				}, {
					value: 1,
					label: '整包'
				}, ]
			}
		},
		methods: {
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.role = Object.assign({}, defaultRole);
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					console.log('form表单数据2',valid);
					if (valid) {
						this.$confirm('是否提交数据', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							creatVersion(this.role).then(response => {
								console.log('版本更新', response)
							});
							
						});
					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
		}
	}
</script>

<style>
</style>
